<template>
  <div class="trash-toolbar">
    <div class="tool-btn" v-if="isTrashCheck">
      <span class="icon" @click="recoveryNote">
        <mu-icon value="恢复"></mu-icon>
      </span>
      <span class="icon" @click="deleteNote">
        <mu-icon value="删除"></mu-icon>
      </span>
    </div>
    <mu-dialog :open="dialog" title="删除便签" @close="close">
      您确定删除所选便签吗？
      <mu-button slot="actions" flat @click="close" primary>取消</mu-button>
      <mu-button slot="actions" flat primary @click="deleteConfirm">确定</mu-button>
    </mu-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      dialog: false
    };
  },
  computed: {
    ...mapGetters(["isTrashCheck"])
  },
  methods: {
    //删除废纸篓便签
    deleteNote() {
      this.dialog = true;
    },
    //确定永久删除
    deleteConfirm() {
      this.dialog = false;
      this.$store.dispatch("deleteTrashNote");
    },
    //取消删除
    close() {
      this.dialog = false;
    },
    //恢复便签
    recoveryNote() {
      this.$store.dispatch("recoveryNote");
    }
  }
};
</script>
<style scoped>
.trash-toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.trash-toolbar .float-button {
  text-align: center;
  line-height: 56px;
  font-size: 22px;
}
.trash-toolbar .tool-btn {
  height: 3rem;
  line-height: 3rem;
  background: #fff;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #777;
}
.trash-toolbar .tool-btn .icon {
  display: inline-block;
  margin: 0 2rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 2rem;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
}
</style>